<template>
  <div class="tab-wrapper">
    <ul class="link-box">
      <li class="item" :class="{ 'selected': 'Preselect' === selected }">
        <a href="javascript:" class="link">我的预选 <i class="el-icon-arrow-down"/></a>
        <ul class="type-box">
          <li @click.stop="$router.push('/UserCenter/Preselect/Expert')"><a href="javascript:" class="link">专家</a></li>
          <li @click.stop="$router.push('/UserCenter/Preselect/Team')"><a href="javascript:" class="link">设计团队</a></li>
        </ul>
      </li>
      <li class="item" :class="{ 'selected': 'Favorite' === selected }"><a href="javascript:" class="link">我的收藏 <i class="el-icon-arrow-down"/></a>
        <ul class="type-box">
          <li @click.stop="$router.push('/UserCenter/Favorite/Expert')"><a href="javascript:" class="link">专家</a></li>
          <li @click.stop="$router.push('/UserCenter/Favorite/Team')"><a href="javascript:" class="link">设计团队</a></li>
        </ul>
      </li>
      <li class="item" :class="{ 'selected': 'Setting' === selected }"  @click="$router.push('/UserCenter/Setting')"><a href="javascript:" class="link">个人设置</a></li>
      <li class="item" :class="{ 'selected': 'DownloadCenter' === selected }"  @click="$router.push('/UserCenter/DownloadCenter')"><a href="javascript:" class="link">下载中心</a></li>
      <div class="user-detail-box">
        <div class="detail-avatar">
          <img class="user-avatar" v-lazy="'api/img/user/'+ $store.state.user.userId +'.png?t=' + new Date().getTime()"/>
          <span class="modify" @click="toggleUploadPhotoShow">修改头像</span>
          <UploadImage :upload-photo="this.uploadPhoto" :url="'./api/user/uploadPhoto'" @change="reloadPhoto"/>
        </div>
        <p class="detail-userName" v-text="$store.state.user.userName"/>
        <el-button type="myBlue" @click="doLoginOut" class="logout-button">退出登录</el-button>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  name: "UserCenterTab",
  components: {UploadImage: () => import("@/components/UploadImage")},
  props: ["selected"],
  data() {
    return {uploadPhoto: {show: false}};
  },
  methods: {
    toggleUploadPhotoShow() {
      this.uploadPhoto.show = !this.uploadPhoto.show;
    },
    reloadPhoto() {
      window.document.getElementsByClassName("user-avatar").item(0)
          .src = "api/img/user/" + this.$store.state.user.userId + ".png?t=" + new Date().getTime();
    },
    doLoginOut() {
      this.$store.commit("doLogout")
      this.$router.push("/Home");
    },
  },
  created() {
    this.$store.commit("me");
  },
}
</script>

<style scoped>
.tab-wrapper {
  width: 100%;
  height: 64px;
  z-index: 10;
  transition: all .3s
}

.tab-wrapper .link-box {
  list-style: none;
  font-size: 18px;
  width: 1440px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex
}

.tab-wrapper .link-box .item {
  margin: 0 4px
}

.tab-wrapper .link-box .selected {
  border-bottom: 2px solid #4c93cf
}

.tab-wrapper .link-box .item:hover .link {
  transition: all .3s;
  color: #4c93cf
}

.tab-wrapper .link-box .item .link {
  display: block;
  line-height: 60px;
  padding: 0 30px;
  background: transparent;
  color: #4a4a4a;
  border-bottom: 2px solid transparent
}

.tab-wrapper .link-box .item:hover .type-box {
  display: block
}

.tab-wrapper .link-box .item .type-box {
  display: none;
  z-index: 200;
  position: absolute;
  text-align: center;
  background-color: #f4f4f4;
  border: 1px solid rgba(48, 55, 66, .15);
  box-shadow: 0 1rem 2rem 0 rgba(48, 55, 66, .15)
}

.tab-wrapper .link-box .item .type-box .link {
  color: #4a4a4a;
  transition: all .3s
}

.tab-wrapper .link-box .item .type-box .link:hover {
  background-color: #4c93cf;
  color: #fff
}

.user-detail-box {
  background-color: #fff;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .05);
  padding: 20px;
  display: inline-block;
  position: relative;
  left: 300px;
  margin-top: -184px;
  z-index: 10;
  width: 400px;
  height: 216px
}

.user-detail-box .detail-avatar {
  width: 176px;
  height: 176px;
  position: relative
}

.user-detail-box .detail-avatar .user-avatar {
  width: 176px;
  height: 176px;
  -o-object-fit: cover;
  object-fit: cover
}

.user-detail-box .detail-avatar:hover .modify {
  display: inline-block
}

.user-detail-box .detail-avatar .modify {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: none;
  padding: 10px;
  background-color: hsla(0, 0%, 49%, .71);
  color: #fff;
  border-radius: 4px;
  font-size: 14px
}

.user-detail-box .detail-userName {
  font-size: 24px;
  width: 160px;
  position: absolute;
  top: 20px;
  left: 220px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden
}

.user-detail-box .logout-button {
  position: absolute;
  bottom: 20px;
  right: 20px
}
</style>